<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.table > tbody > tr > td{
		vertical-align: middle;
	}
	.m-ipt{
		-webkit-appearance: none;
	    background-color: #fff;
	    background-image: none;
	    border-radius: 4px;
	    border: 1px solid #dcdfe6;
	    box-sizing: border-box;
	    color: #606266;
	    display: inline-block;
	    font-size: inherit;
	    height: 32px;
	    line-height: 32px;
	    outline: none;
	    padding: 0 10px;
	    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	    width: 100%;
	}
	.m-ipt:focus {
	    outline: none;
	    border-color: #409eff;
	}
	.orange{
		color: orange;
		font-weight: bold;
	}
	.red{
		color: red;
		font-weight: bold;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>收发货管理</li>
			    <li>发货列表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						提交日期：<input type="text" class="form-control" size="6" name="date1" onclick="WdatePicker()">
						- <input type="text" class="form-control" size="6" name="date2" onclick="WdatePicker()">
						<input type="text" class="form-control" v-model="search.express_no" placeholder="单号匹配" size="10">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover">
						<thead>
							<tr>
								<th>快递公司</th>
								<th>快递单号</th>
								<th>发货</th>
								<th>日期</th>
								<th>发货明细</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody >
							<tr v-for="row in rows">
					        	<td>{{ row.name }}</td>
					        	<td>{{ row.express_no }}</td>
					        	<td>{{ row.sender }}</td>
					        	<td>{{ row.add_day }}
									<span style="color:#aaa;font-size: 12px;">{{ row.add_time }}</span>
								</td>
					        	<td>
					        		<div v-for="item in row.items" style="float: left;margin-right: 10px;">
					        			<a :href="item.goods_pic" target="_BLANKS">
					        				<img :src="item.goods_pic" height="50" class="pre_view">
					        			</a>
					        			<div>{{ item.goods_name }}</div>
				        			</div>
					        	</td>
					        	<td><a href="javascript:;" @click="toDetial(row.id)"><i class="fa fa-eye"></i> 查看</a></td>
								<td><a href="javascript:;" @click="editDetial(row)"><i class="fa fa-edit"></i> 修改</a></td>
							</tr>
							<tr>
								<td colspan="6" v-if="rows.length==0" style="color: red;">没有记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>		
			</div>
		</div>
		<vue-modal :visible.sync="showModal" title="查看明细">
			<div class="form-horizontal">
				

				
				
			</div>
		</vue-modal>
		<!-- 修改物流 -->
		<el-dialog
		title="修改快递"
		:visible.sync="dialogVisible"
		@close="expressClose"
		width="30%">
			<el-select v-model="express.name" placeholder="请选择" style="width: 100%;">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			<el-input style="margin-top:10px;" v-model="express.express_no" placeholder="请输入快递号" size="normal" clearable></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="setExpress">确 定</el-button>
			</span>
		</el-dialog>
		<!-- END MAIN CONTENT -->
	</div>
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					express_no: '',
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				dialogVisible:false,
				express:{
					name:'',
					express_no:'',
					id:''
				},
				options: [{
					value: 'EMS',
					label: 'EMS'
					}, {
					value: '顺丰',
					label: '顺丰'
					}, {
					value: '圆通',
					label: '圆通'
					}, {
					value: '中通',
					label: '中通'
					}, {
					value: '京东',
					label: '京东'
				}],
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal,
			},
			created: function(){
				this.getList();
			},
			methods:{
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					var date1 = $("input[name='date1']").val();
					var date2 = $("input[name='date2']").val();
					if (date1 && date2) {
						data['date1'] = date1;
						data['date2'] = date2;
					}
					$.post("{%:url('Express/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				
				toDetial: function(id){
					this.edit_status = 0;
					this.showModal = true;
					var _this = this;
					$.post("{%:url('Orders/detail')%}",{
						id: id
					},function(rsp){
						_this.order = rsp.data.info;
					},'json')
				},
				// 打开
				editDetial(row){
					this.express = {
						name:row.name,
						express_no:row.express_no,
						id:row.id
					};
					this.dialogVisible = true;

				},
				// 关闭
				expressClose(){
					this.dialogVisible = false;
				},
				setExpress(){
					$.post("{%:url('Express/editExpress')%}",this.express,(rsp)=>{
						if(rsp.code == 1){
							this.$message.success(rsp.msg);
							this.getList(this.cur_page);
							this.dialogVisible = false;
						}else{
							this.$message.error(rsp.msg);
						}
						
					},'json')
					
				},
				handleCancel: function(){
					var _this = this;
					var data = {
						order_item_id: this.cancel_info.id,
						reason: this.cancel_info.reason
					}
					$.post("{%:url('Orders/cancelItem')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code){
							_this.toDetial(_this.order.id);
						}
					},'json')
				},
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','img.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('src')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','img.pre_view',function(){
			layer.close(tip_index);
		})
		
	</script>
</body>

</html>